<template>
  <div>
    <div class="new-user">
      <!-- 头部 -->
      <el-row>
        <!-- 标题 -->
        <el-col :span="14">
          <el-tabs v-model="activeName">
            <el-tab-pane label="新增用户数"
                         name="first"></el-tab-pane>
          </el-tabs>
        </el-col>

        <!-- 周月年 -->
        <el-col :span="10">
          <el-row>
            <!-- 按钮 -->
            <el-col :span="11">
              <el-button size="small"
                         @click="onDateBtn('weekShow')"
                         :class="{dateColor:weekShow}">按周</el-button>

              <el-button size="small"
                         @click="onDateBtn('monthShow')"
                         :class="{dateColor:monthShow}">按月</el-button>
              <el-button size="small"
                         @click="onDateBtn('yearShow')"
                         :class="{dateColor:yearShow}">按年</el-button>
            </el-col>

            <!-- 日历 -->
            <el-col :span="5">
              <!-- 周 -->
              <div class="block">
                <el-date-picker v-model="value1"
                                v-show="weekShow"
                                type="week"
                                format="yyyy 第 WW 周"
                                range-separator="to"
                                @change="changeweek">
                  <!-- start-placeholder="startDate"
                                end-placeholder="endDate" -->
                </el-date-picker>

              </div>
              <!-- 月 -->
              <div class="block">
                <el-date-picker v-model="value1"
                                v-show="monthShow"
                                type="month"
                                @change="changemonth"
                                format="yyyy 第 M 月">
                </el-date-picker>
              </div>
              <!-- 年 -->
              <div class="block">
                <el-date-picker v-model="value1"
                                v-show="yearShow"
                                type="year"
                                @change="changeyear"
                                format="yyyy 年">
                </el-date-picker>
              </div>
            </el-col>

          </el-row>
        </el-col>

      </el-row>

      <!-- 折线图 -->
      <div class="box"></div>

    </div>

    <!-- 分隔用的空盒子 -->
    <div class="kong"></div>

    <!-- 表格 -->
    <div class="table-list ">
      <el-table :data="list"
                border
                stripe
                highlight-current-row
                :header-cell-style="{'text-align':'center',background:'#F5F7FA',color:'#888', height: 60 + 'px'}"
                :cell-style="{'text-align':'center'}"
                :row-style="{height: 50 + 'px'}">
        <el-table-column prop="day"
                         label="时间">
        </el-table-column>
        <el-table-column prop="userNum"
                         label="新增用户数">
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pagenum"
                   :page-sizes="[7, 40, 400]"
                   :page-size="pagesize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

    <div class="bottom"></div>

  </div>

</template>
<script>
import { getDate } from '@/api/user'

export default {
  name: 'newUser',
  components: {},
  props: {},
  data () {
    return {
      activeName: 'first',
      // 日历开关
      weekShow: true,
      monthShow: false,
      yearShow: false,
      // 日历时间
      value1: new Date(),
      value2: '',
      value3: '',
      // 范围时间
      startDate: '',
      endDate: '',
      
     
      // 每周数据
      day: '',
      userNum: '',

      // 分页
      list: [],
      total: 0,
      pagesize: 7,
      pagenum: 1,

      // echarts
      option: {
          tooltip: {
              trigger: 'axis'
          },
          grid: {
              left: '0%',
              right: '10%',
              bottom: '0%',
              top: '8%',
              containLabel: true
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: []
          },
          yAxis: {
              type: 'value'
          },
          series: [
              {
                name: '新增用户数',
                type: 'line',
                stack: '总量',
                data: [],
                smooth: true,
                areaStyle: {
                  color: '#f3fffe'
                }
              }
          ],
          lineStyle:{
              color:'#2075f1'
          }
      }
    
     
    }
  },
  created () {
    this.weekChange()
    this.onDateBtn('weekShow')
  },
  methods: {
    // 日历切换
    onDateBtn (type) {
      if (type === 'weekShow') {
      //  方法中调用变量需要加 this 
        this.weekShow = true
        this.monthShow = false
        this.yearShow = false

        this.changeweek()
      
      } else if (type === 'monthShow') {
        this.weekShow = false
        this.monthShow = true
        this.yearShow = false

        this.changemonth()
      } else {
        this.weekShow = false
        this.monthShow = false
        this.yearShow = true

        this.changeyear()
      }

      
    },
    // echarts
    getEchartData() {
      // 需要强制改成异步执行
      setTimeout(()=>{
          var myChart = this.$echarts.init(document.querySelector('.box'))
          myChart.setOption(this.option)
      },0)
    },
    // 获取每周日期
    changeweek() {
      var d = new Date(this.value1)
      // 起始日期
      var youWant = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + (d.getDate() - 1) 
      this.startDate = youWant

      // 终止日期
      var d2 = new Date(+new Date(this.value1) + 5 * 86400000)
      var youWant2 = d2.getFullYear() + '-' + (d2.getMonth() + 1) + '-' + d2.getDate()
      this.endDate = youWant2

      this.weekChange ()
      // this.getEchartData()
    },
    // 获取每月数据
    changemonth () {
      let date = new Date(this.value1);
      let month = (date.getMonth() + 1).toString().padStart(2,'0');
      let year = date.getFullYear();
      let startTime = year + '-' + month + '-' + '01';
      let day = new Date(year,month,0);
      let endTime = year + '-' + month + '-' + day.getDate();

      console.log(startTime)
      console.log(endTime)

      this.startDate = startTime
      this.endDate = endTime

      this.weekChange ()
      // this.getEchartData()
      
    },
    // 获取每年数据
    changeyear () {
      var d = new Date(this.value1)
      console.log(d);
      var youWant = d.getFullYear() + '-' + '01' + '-' + '01'
      console.log(youWant)

      var youWant2 = d.getFullYear() + '-' + '12' + '-' + '31' 
      console.log(youWant2)

      this.startDate = youWant
      this.endDate = youWant2

      console.log(youWant);
      console.log(youWant2);

      this.weekChange ()
      // this.getEchartData()

    },
    // 赋值周月年数据
    async weekChange () {
      // 置空上一条数据
      this.option.xAxis.data = []
      this.option.series[0].data = []

      const { data } = await getDate({
        startDate: this.startDate,
        endDate: this.endDate
      })

      // 分页设置
      var startPage = (this.pagenum - 1) * this.pagesize
			var endPage = this.pagenum * this.pagesize
      console.log(startPage,endPage)

      this.list = data.result.slice(startPage ,endPage)
      this.total = data.result.length


      // 遍历数据
      this.list.forEach( item => {
        this.option.xAxis.data.push(item.day)
        this.option.series[0].data.push(item.userNum)
      })
      this.$nextTick(function(){
        this.getEchartData()
      })
    },
    // 页码改变
    handleSizeChange (newSize) {
      this.pagesize = newSize
      console.log(this.pagesize)
      this.weekChange()
    },
     // 每页数量改变
    handleCurrentChange (newPage) {
      this.pagenum = newPage
      console.log(this.pagenum)
      this.weekChange()
    },
  },
  mounted () {
      // this.getEchartData() 
  },
  computed: {},
  watch: {},
}

</script>
<style lang='less' scoped>
.new-user {
  width: 1220px;
  height: 430px;
  margin-left: 24px;
  padding-top: 25px;
}
/deep/ .el-tabs__nav-wrap::after {
  width: 0;
}
.el-button {
  margin-top: 5px;
  border: none;
}
.dateColor {
  background-color: #079fff;
  color: #fff;
}
.box {
  width:1270px;
  height:356px;
}
.table-list {
  padding: 30px;
  background-color: #fff;
}

.kong {
  height: 15px;
  background-color: #f5f5f5;
}
.el-pagination {
  float: right;
  margin-right: 45px;
}
.bottom {
  width: 100%;
  height: 30px;
  margin-top: 30px;
}







</style>